<template>
	<view class="statis"
		:style="{ marginTop: item.style.marginTop,color: item.style.color, marginBottom: item.style.marginBottom }">
		<view class="left">
			<image :src="item.statIcon" mode=""></image>
		</view>
		<view class="right">
			<view class="check" v-if="item.browseShow == true">
				<view class="image">
					<image src="/static/home/icon1.png" mode=""></image>
				</view>
				<view class="text">
					{{item.browseNum}}
				</view>
			</view>
			<view class="check" v-if="item.issueShow == true">
				<view class="image">
					<image src="/static/home/icon2.png" mode=""></image>
				</view>
				<view class="text">
					{{item.issueNum}}
				</view>

			</view>
			<view class="check" v-if="item.memberShow == true">
				<view class="image">
					<image src="/static/home/icon3.png" mode=""></image>
				</view>
				<view class="text">
					{{item.memberNum}}
				</view>

			</view>
			<view class="check" v-if="item.shopShow == true">
				<view class="image">
					<image src="/static/home/icon4.png" mode=""></image>
				</view>
				<view class="text">
					{{item.shopNum}}
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {

		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			item: {
				type: Object,
				default: {}
			}
		},

		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {

		}

	}
</script>

<style lang="scss" scoped>
	.statis {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx 0 20rpx;
		.left {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.right {
			width: 80%;
			display: flex;
			justify-content: space-between;

			.check {
				display: flex;
				font-size: 28rpx;
				color: #999;
				padding-top: 8rpx;
				.image{
					margin-right: 10rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
				
			}
		}

	}
</style>
